<template>
  <div>
    <div align="right" style="margin-bottom: 15px">
      <el-button type="primary" @click="openAdd">新增科室</el-button>
    </div>
    <el-table :data="tableData" height="433" border>
      <el-table-column prop="deptCode" label="科室编号" align="center" />
      <el-table-column prop="name" label="科室名称" align="center" />
      <el-table-column prop="usercount" label="员工数量" align="center" />
      <el-table-column label="操作" align="center" width="400">
        <template slot-scope="scope">
          <el-button
            type="text"
            style="margin-right: 40px"
            @click="openEdit(scope.row)"
          >
            编辑科室
          </el-button>
          <el-button type="text" @click="employee(scope.row)">
            查看员工
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="page.current"
      :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90]"
      :page-size.sync="page.limit"
      layout="sizes, prev, pager, next ,total"
      :total="page.total"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      title="新增医院科室"
      :visible.sync="addVisible"
      custom-class="add-dialog"
      width="600px"
      center
      @open="afterAdd"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        label-width="80px"
        style="padding: 0 20px 0 10px"
        :rules="addFormRule"
      >
        <el-form-item label="科室名称" prop="name">
          <el-input v-model="addForm.name" />
        </el-form-item>
        <el-form-item label="科室编号" prop="deptNum">
          <el-select
            v-model="addForm.deptNum"
            placeholder="后缀号,非必填项"
            clearable
            style="width: 100%"
          >
            <el-option value="一科" />
            <el-option value="二科" />
            <el-option value="三科" />
            <el-option value="四科" />
            <el-option value="五科" />
            <el-option value="六科" />
            <el-option value="七科" />
            <el-option value="八科" />
            <el-option value="九科" />
            <el-option value="十科" />
          </el-select>
        </el-form-item>
        <el-form-item label="科室编号">
          <el-input disabled placeholder="系统自动生成" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addConfirm"> 确 定 </el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="修改医院科室"
      :visible.sync="editVisible"
      custom-class="add-dialog"
      width="600px"
      center
    >
      <el-form
        ref="editForm"
        :model="editForm"
        label-width="80px"
        style="padding: 0 20px"
        :rules="editFormRule"
      >
        <el-form-item label="科室名称" prop="deptName">
          <el-input v-model="editForm.deptName" />
        </el-form-item>
        <el-form-item label="科室编号" prop="deptNum">
          <el-select
            v-model="editForm.deptNum"
            placeholder="后缀号,非必填项"
            clearable
            style="width: 100%"
          >
            <el-option value="一科" />
            <el-option value="二科" />
            <el-option value="三科" />
            <el-option value="四科" />
            <el-option value="五科" />
            <el-option value="六科" />
            <el-option value="七科" />
            <el-option value="八科" />
            <el-option value="九科" />
            <el-option value="十科" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="editConfirm"> 确 定 </el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="员工查看"
      :visible.sync="employeeVisble"
      width="1200px"
      center
    >
      <div>
        <el-table :data="employeeData" height="433" border>
          <el-table-column prop="jobNumber" label="用户工号" align="center" />
          <el-table-column prop="name" label="用户姓名" align="center" />
          <el-table-column prop="userType" label="用户职称" align="center" />
          <el-table-column
            prop="departmentName"
            label="所属科室"
            align="center"
          />
          <el-table-column prop="authority" label="账号权限" align="center" />
          <el-table-column
            prop="roleName"
            label="分配角色"
            align="center"
            width="180"
          />
          <el-table-column prop="email" label="员工编号" align="center" />
          <el-table-column prop="username" label="员工账号" align="center" />
          <el-table-column prop="phoneNum" label="联系方式" align="center" />
        </el-table>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="employeeVisble = false">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  hospitalIdNew,
  addNew,
  update
} from '@/api/back-management/user-manage/dept'
import { users1New } from '@/api/back-management/user-manage/employee'
import { getToken } from '@/utils/auth'
export default {
  name: 'Department',
  props: {
    hospitalId: {
      type: [String, Number],
      default: '37'
    },
    regionId: {
      type: [String, Number],
      default: '0'
    }
  },
  data() {
    return {
      tableData: [],
      employeeData: [],
      page: {
        current: 1,
        limit: 10,
        total: 0
      },
      addForm: { deptNum: '' },
      editForm: {},
      addVisible: false,
      editVisible: false,
      employeeVisble: false,
      addFormRule: {
        name: [{ required: true, message: '请输入科室名称', trigger: 'blur' }]
      },
      editFormRule: {
        deptName: [
          { required: true, message: '请输入科室名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.hospitalIdNew()
  },
  methods: {
    usersNew(row) {
      this.employeeData = row.userList
    },
    hospitalIdNew() {
      hospitalIdNew({
        hospitalId: this.hospitalId,
        pageNum: this.page.current,
        pageSize: this.page.limit,
        token: getToken()
      }).then((res) => {
        this.tableData = res.data.list
        this.page.total = res.data.total
      })
    },
    afterAdd() {
      this.addForm = { deptNum: '' }
    },
    openAdd() {
      this.addVisible = true
    },
    addConfirm() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          if (!this.editForm.deptNum) {
            this.editForm.deptNum = ''
          }
          this.addForm.deptName = this.addForm.name + this.addForm.deptNum
          this.addForm.regionId = this.regionId
          this.addForm.hospitalId = this.hospitalId
          this.addForm.token = getToken()
          addNew(this.addForm).then((res) => {
            if (typeof res === 'string' && res.indexOf('云服务接口错误') > -1) {
              let err_message1 = '科室名重复'
              let err_message2 = '用户没有权限添加当前医院科室！'
              if (res.indexOf(err_message1) > -1) {
                this.$message.error(err_message1)
              } else if (res.indexOf(err_message2) > -1) {
                this.$message.error(err_message2)
              } else {
                this.$message.error('新增科室失败')
              }
            } else {
              this.$message.success('新增科室成功')
              this.page.current = 1
              this.hospitalIdNew()
              this.addVisible = false
            }
          })
        }
      })
    },
    handleSizeChange(val) {
      this.page.limit = val
      this.page.current = 1
      this.hospitalIdNew()
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.hospitalIdNew()
    },
    openEdit(row) {
      this.editForm = JSON.parse(JSON.stringify(row))
      if (this.editForm.deptNum) {
        const lastIndex = this.editForm.name.lastIndexOf(this.editForm.deptNum)
        if (
          this.editForm.deptNum.length ==
          this.editForm.name.length - lastIndex
        ) {
          this.editForm.deptName = this.editForm.name.substring(0, lastIndex)
        } else {
          this.editForm.deptName = this.editForm.name
        }
      } else {
        this.editForm.deptName = this.editForm.name
      }
      this.editVisible = true
    },
    editConfirm() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          if (!this.editForm.deptNum) {
            this.editForm.deptNum = ''
          }
          this.editForm.name = this.editForm.deptName + this.editForm.deptNum

          this.editForm.token = getToken()
          update(this.editForm).then((res) => {
            if (typeof res === 'string' && res.indexOf('云服务接口错误') > -1) {
              let err_message1 = '科室名重复'
              let err_message2 = '用户没有权限修改当前医院科室！'
              if (res.indexOf(err_message1) > -1) {
                this.$message.error(err_message1)
              } else if (res.indexOf(err_message2) > -1) {
                this.$message.error(err_message2)
              } else {
                this.$message.error('修改科室失败')
              }
            } else {
              this.hospitalIdNew()
              this.$message.success('修改科室成功')
              this.editVisible = false
            }
          })
        }
      })
    },
    employee(row) {
      this.usersNew(row)
      this.employeeVisble = true
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .add-dialog .el-dialog__body {
  padding-bottom: 0;
}
</style>
